<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-05-27 14:13:48
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-17 11:03:05
 * @FilePath: \icoder-frontend\blog\src\components\MavonEditor.vue
-->
<template>
  <div class="md-editor">
      <mavon-editor
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
        @change="change"
        :toolbars="toolbars"
        :placeholder="placeholder"
        class="mavon"
        v-model="content"
        defaultOpen="edit"
        codeStyle="atom-one-dark"
        :ishljs="true"
        ref="md"
        :style="{'min-height':minHeight}"
        :externalLink="externalLink"
      />
    </div>
</template>
<script>
//该组件中注释掉的代码为局部注册的方式。
import { mavonEditor } from "mavon-editor";
import {deleteFile} from 'api';
import "mavon-editor/dist/css/index.css";
import axios from "axios";
export default {
  data: function() {
    return {
      content: "",
      html: "",
      externalLink:{
         markdown_css: function() {
                // 这是你的markdown css文件路径
                return '../styles/github-markdown.min.css';
            },
        },
      imgUrl: "",
      };
    
  },
  props:{
      placeholder:{
          type:String,
          default:"请使用Markdown语法输入正文..."
      },
      minHeight:{
        type:String,
        default:"200px"
      },
      toolbars:{
        type:Object,
        default:()=>({
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      })
    },

  },
  components: {
    mavonEditor
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      
      var formdata = new FormData();
      formdata.append("image", $file);

      //将下面上传接口替换为你自己的服务器接口
      axios({
        url: (process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API : process.env.VUE_APP_API_DEV) + "/file/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data",
                   "Authorization":'Bearer ' + this.$store.getters.auth.token
        }
      }).then(res => {
        // console.log(res)
        this.imgUrl = res.data.data.url;
        let baseUrl=process.env.NODE_ENV === 'production'
											? window.location.protocol+ "//" + window.location.host + "/" 
                                            // ? ''
											:process.env.VUE_APP_BASE_URL;
        this.$refs.md.$img2Url(pos,baseUrl+this.imgUrl);
      });
    },
    $imgDel(pos){
    // console.log("imgDel: ",this.imgUrl)
      // delete this.img_file[pos];
    let params={path:this.imgUrl}
    deleteFile(params).then(res=>{
 
    // console.log("deleteFile：",res)
    }).catch(err=>{
    // this.$message.error("删除失败");
    this.$notify({
        position: 'top-left',//左上方显示
        type:"error",
        duration:3000, //显示3秒自动消失
        showClose:false, //不显示关闭按钮
        message:`删除失败`, //显示的消息
        offset:100, //到顶部的偏移量
      })
    console.log("deleteFile：",err)
    })
  },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render;
    },
  }
};
</script>
<style lang="scss" scoped>
.mavon{
    width:100%;
}

</style>